<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Square Jump</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin:0px;
            }
            a{
                text-decoration: none;
                list-style: none;
                color:rgb(0,0,0);
            }
            #main_box{
                margin: 0px auto;
                width:420px;
                height: 580px;
                background:skyblue;
                //background:#87ceeb;
                position: relative;
                overflow: hidden;
            }
            .can{
                position: absolute;
                top: 0px;
                left: 0px;
            }
            #score{
                width:auto;
                height: 40px;
                font-size:22px;
                color:black;
                position: absolute;
                bottom: 10px;
                left: 10px;
                display: block;
            }
            #game_title{
                display: none;
                position: absolute;
                width: 240px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                top: 35%;
                left: 50%;
                margin-left:-120px;
                font-size: 42px;
                font-family:"century gothic";
                font-weight: bolder;
                text-shadow:4px 3px 2px black;
                /*-webkit-text-stroke: 1px springgreen;
                -moz-text-stroke: 1px springgreen;
                -o-text-stroke: 1px springgreen;
                text-stroke: 1px springgreen;*/
                //color:#FAFAD2;
                color:#fff;
            }
            #login_btn{
                display: none;
                position: absolute;
                bottom:100px;
                left: 50%;
                width: 100px;
                height: 40px;
                margin-left: -50px;
                line-height: 40px;
                text-align: center;
                border-radius: 12px;
                border: 2px solid #FFFFFF;
                font-size: 18px;
                //color: aquamarine;
                color: #000000;
                font-weight: normal;
                //background:lightgoldenrodyellow;
                background: peachpuff;
                //box-shadow:0px 0px 2px 5px #7FFFD4;
            }
            #login_btn:hover{
                color: #fff;;
            }
            #login_btn:active{
                background: #FFFFFF;
                color: #000000;
            }
            #square_main{
                width: 40px;
                height: 40px;
                position:absolute;
                top:0px;
                left: 0px;
                border: 2px solid #FFFFFF;
                display: none;
                background:#FF6688;
            }
            #state{
                width:280px;
                height: 60px;
                font-size:18px;
                font-weight: bolder;
                text-shadow: #FDF5E6;
                color:blueviolet;
                font-family: "arial narrow";
                position: absolute;
                top: 45%;
                left: 50%;
                line-height: 60px;
                text-align: center;
                margin-left: -140px;
                display: none;
            }
            #colorChangeTime_div{
                width: 200px;
                height: 50px;
                line-height: 50px;
                //background: red;
                position: absolute;
                text-align: center;
                top:3%;
                left: 50%;
                display: none;
                color:#FFFFFF;
                font-size: 40px;
                
            }
            #pause_hint {
                display: block;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 18px;
                color: #000000;
            }
            
        </style>
    </head>
    <body>
        <div id="main_box">
            <!-- 游戏主容器，包含所有游戏元素 -->
            <canvas id="myCanvas1" class="can"></canvas>
            <canvas id="myCanvas2" class="can"></canvas>
            <!-- 用于绘制背景和方块的画布 -->
            <a href="#" id="login_btn">开始游戏</a>
            <!-- 开始游戏按钮，点击后开始游戏 -->
            <div id="score">得分: 0</div>
            <!-- 显示玩家得分 -->
            <div id="game_title">方&nbsp;块&nbsp;跳&nbsp;跃</div>
            <!-- 游戏标题，显示在游戏开始前 -->
            <div id="state"></div>
            <!-- 显示游戏状态，如游戏结束时的得分 -->
            <span id="square_main"></span>
            <!-- 玩家控制的方块，显示在开始动画中 -->
            <div id="colorChangeTime_div">10</div>
            <!-- 显示颜色变化倒计时，提醒玩家切换颜色 -->
            <div id="pause_hint">按回车键暂停/继续游戏</div>
            <!-- 提示玩家如何暂停/继续游戏 -->
        </div>
        <!-- 引入游戏所需的所有 JavaScript 文件 -->
        <script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/background.js"></script>
        <script type="text/javascript" src="js/square.js"></script>
        <script type="text/javascript" src="js/mySquare.js"></script>
        <script type="text/javascript" src="js/beginAnim.js"></script>
    </body>
</html>
